import React from "react";
import {ActionIcon, ActionIconGroup, Tooltip} from "@mantine/core";
import {IconCircle, IconGrid3x3, IconHierarchy, IconPolygon} from "@tabler/icons-react";
import {Core} from "cytoscape";
import {layouts} from "./cy-layouts";

type LayoutName = "circle" | "grid" | "dagre" | "coseBilkent";

const changeLayout = (cy: Core, name: LayoutName) => {
  cy.layout(layouts[name]).run();
  cy.resize();
  cy.fit(cy.elements(), 30);
};

export const IpdGraphLayout = ({cy}: {cy: Core}) => {
  return (
    <ActionIconGroup>
      <Tooltip
        label="圆形布局"
        withArrow
        position="bottom"
        transitionProps={{transition: "fade", duration: 300}}
      >
        <ActionIcon variant="default" onClick={() => changeLayout(cy, "circle")}>
          <IconCircle size={16} stroke={1.5} />
        </ActionIcon>
      </Tooltip>
      <Tooltip
        label="网格布局"
        withArrow
        position="bottom"
        transitionProps={{transition: "fade", duration: 300}}
      >
        <ActionIcon variant="default" onClick={() => changeLayout(cy, "grid")}>
          <IconGrid3x3 size={16} stroke={1.5} />
        </ActionIcon>
      </Tooltip>
      <Tooltip
        label="分层布局"
        withArrow
        position="bottom"
        transitionProps={{transition: "fade", duration: 300}}
      >
        <ActionIcon variant="default" onClick={() => changeLayout(cy, "dagre")}>
          <IconHierarchy size={16} stroke={1.5} />
        </ActionIcon>
      </Tooltip>

      <Tooltip
        label="力引布局"
        withArrow
        position="bottom"
        transitionProps={{transition: "fade", duration: 300}}
      >
        <ActionIcon variant="default" onClick={() => changeLayout(cy, "coseBilkent")}>
          <IconPolygon size={16} stroke={1.5} />
        </ActionIcon>
      </Tooltip>
    </ActionIconGroup>
  );
};
